<template>
  <div class="app">
    <van-nav-bar
      title="我的预约"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <div
      class="table-card"
      v-if="orderinfo.table != null && orderinfo.table.length > 0"
    >
      <div
        v-for="(order, index) in orderinfo.table"
        :key="index"
        class="order_card"
      >
        <div class="titleline">
          <icon-svg
            icon-class="club_blue"
            icon-color="#304056"
            class="club_white-icon"
          ></icon-svg>
          <div class="title">
            {{ order.store_name }}{{ order.t_number }}号球桌
          </div>
        </div>
        <div class="infoline">预约时间：{{ order.time }}</div>
        <div class="infoline">
          <div>费用预计：￥</div>
          <div class="money">{{ order.currentprice.toFixed(2) }}</div>
        </div>
        <div class="btn-card">
          <van-button
            class="xudanbtn"
            type="primary"
            @click="cancelorder(order)"
          >
            取消预约
          </van-button>
          <van-button
            class="jiesuanbtn"
            type="primary"
            @click="checkout(order)"
          >
            开台
          </van-button>
        </div>
      </div>
    </div>
    <div
      class="zhujiao-card"
      v-if="orderinfo.zhujiao != null && orderinfo.zhujiao.length > 0"
    >
      <div class="boxtitle">
        <div class="shuxian"></div>
        <div class="datetitle">教练</div>
      </div>
      <div
        v-for="(order, index) in orderinfo.zhujiao"
        :key="index"
        class="order_card"
      >
        <div class="zhujiaobox">
          <div class="avatarbox">
            <img class="avatar" v-lazy="order.zhujiao_image" alt="" />
          </div>
          <div class="zhujiaoinfobox">
            <div class="nickname-price-box">
              <div style="font-size: 18px">
                {{ order.nickname }}
              </div>
              <div style="display: flex; align-items: flex-end">
                <div style="font-size: 20px; color: #5f94fd">
                  ￥{{ order.zhujiao_price }}
                </div>
                <div style="font-size: 14px; min-width: 50px">/小时</div>
              </div>
            </div>
            <div style="font-size: 16px">
              {{ order.zhujiao_id }}号{{ order.level }}
            </div>
          </div>
        </div>
        <div class="infoline1">预约时间{{ order.time }}</div>
        <div class="infoline1">
          <div>费用预计：￥</div>
          <div class="money">{{ order.currentprice }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import { opentablereservation, cancelreservation } from "@/http/request.js";
import { useStore } from "@/store/index.js";
import { showToast } from "vant";
export default {
  data() {
    return {
      orderinfo: {},
    };
  },
  methods: {
    checkout(order) {
      const formdata = {};
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      formdata.order_id = order.id;
      formdata.phone = userinfo.phone;
      formdata.user_id = userinfo.id;
      opentablereservation(formdata).then((res) => {
        showToast(res.msg);
        if (res.code == 0) {
          const store = useStore();
          const playingorder = store.getPlayingOrder;
          playingorder.table.push(res.data);
          store.setPlayingOrder(playingorder);
          this.$router.push("/tableplaying");
        }
      });
    },
    cancelorder(order) {
      var currentTime = new Date();
      var startTime = new Date(order.start_time);
      if (startTime < currentTime) {
        showToast("已过预约开始时间，不可取消订单");
      } else {
        cancelreservation({ o_id: order.id }).then((res) => {
          showToast(res.msg);
          if (res.code == 0) {
            const store = useStore();
            const yuyueorder = store.getYuyueingOrder;
            for (var i = 0; i < yuyueorder.table.length; i++) {
              if (order.id == yuyueorder.table[i].id) {
                yuyueorder.table.splice(i, 1); // 从数组中删除指定位置的元素
                store.setYuyueingOrder(yuyueorder);
                break; // 找到后立即退出循环
              }
            }
            this.getyuyueorder();
          }
        });
      }
    },
    backlink() {
      this.$router.push("/homepage");
    },
    gotodiancan() {
      this.$router.push({
        name: "DiancanPage",
        params: {
          orderinfo: JSON.stringify(this.orderinfo),
        },
      });
    },
    inittableorder(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].t_grade == 1) {
          data[i].level = "中巴";
        } else if (data[i].t_grade == 2) {
          data[i].level = "包间";
        } else if (data[i].t_grade == 3) {
          data[i].level = "斯诺克";
        }
        let startDate = new Date(data[i].start_time);
        let endDate = new Date(data[i].end_time);
        let startTimeString = `${startDate.getFullYear()}-${(
          startDate.getMonth() + 1
        )
          .toString()
          .padStart(2, "0")}-${startDate
          .getDate()
          .toString()
          .padStart(2, "0")} ${startDate
          .getHours()
          .toString()
          .padStart(2, "0")}:${startDate
          .getMinutes()
          .toString()
          .padStart(2, "0")}`;
        let endTimeString = `${endDate
          .getHours()
          .toString()
          .padStart(2, "0")}:${endDate
          .getMinutes()
          .toString()
          .padStart(2, "0")}`;

        // 合并时间范围格式
        let timeRange = `${startTimeString} - ${endTimeString}`;
        data[i].time = timeRange;
        let diffMinutes = Math.abs(
          (endDate.getTime() - startDate.getTime()) / (1000 * 60)
        );
        data[i].currentprice = (data[i].table_price / 60) * diffMinutes;
      }
    },
    initzhujiaoorder() {},
    getyuyueorder() {
      this.orderinfo = {};
      const store = useStore();
      const yuyueorder = store.getYuyueingOrder;
      this.orderinfo.table = yuyueorder.table;
      this.orderinfo.zhujiao = yuyueorder.zhujiao;
      this.inittableorder(this.orderinfo.table);
      this.initzhujiaoorder(this.orderinfo.zhujiao);
    },
  },
  created() {
    this.getyuyueorder();
  },
};
</script>
  
  <style scoped>
.app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background-color: #f2f3f5;
}
.table-card {
  width: 90%;
  background: linear-gradient(to bottom, white, #99c6fa);
  margin: 15px auto;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.order_card {
  width: 100%;
  margin: 0 auto;
}
.titleline {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}
.club_white-icon {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}
.titleline .title {
  font-size: 20px;
}
.infoline {
  width: 100%;
  height: 35px;
  font-size: 17px;
  line-height: 25px;
  box-sizing: border-box;
  padding: 5px;
  padding-left: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
}
.infoline .money {
  font-size: 20px;
  color: #fe865e;
  font-weight: 600;
}
.zhujiao-card {
  width: 90%;
  background-color: white;
  margin: 15px auto;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.boxtitle {
  display: flex;
  align-items: center;
}
.shuxian {
  width: 4px;
  height: 18px;
  background-color: #5e94fe;
  border-radius: 3px;
}
.datetitle {
  font-size: 18px;
  line-height: 25px;
  margin-left: 5px;
  font-weight: 550;
}
.zhujiaobox {
  width: 100%;
  height: 60px;
  margin: 10px auto;
  display: flex;
}
.zhujiaobox .avatarbox {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.zhujiaobox .avatarbox .avatar {
  width: 100%;
  height: auto;
}
.zhujiaoinfobox {
  width: 75%;
  margin-left: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.nickname-price-box {
  display: flex;
  justify-content: space-between;
}
.infoline1 {
  width: 100%;
  height: 35px;
  font-size: 17px;
  line-height: 25px;
  box-sizing: border-box;
  padding: 5px;
  padding-left: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
}
.infoline1 .money {
  font-size: 19px;
  color: #fe865e;
  font-weight: 550;
}
.btn-card {
  width: 90%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}
.xudanbtn {
  width: 45%;
  height: 40px;
  border-radius: 25px;
}
.jiesuanbtn {
  width: 45%;
  height: 40px;
  border-radius: 25px;
}
</style>